<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=u3Y99hhCNVFBkxrGpWMGX9CFnkn4GZAD"></script>
  <!-- <script src="js/jquery.baiduMap.min.js"></script> -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
    }

    ul {
      list-style: none;
    }

    body,
    html {
      height: 100%;
      font-family: "微软雅黑";
    }

    .box {
      width: 100%;
      height: 100%;
      /* margin: 40px 0; */
    }

    #container1,
    #container2 {
      width: 100%;
      height: 100%;
    }

    #container3 {
      width: calc(100% - 350px);
      height: 100%;
    }

    .list {
      width: 350px;
      height: 100%;
      background: #FFFFFF;
    }

    .list h3 {
      text-align: center;
      padding: 20px 0 10px;
    }

    #aaaa {
      margin-top: 20px;
      height: calc(100% - 100px);
      overflow: auto;
      font-size: 0;
      padding: 0 10px;
    }

    .list li {
      padding: 6px 10px;
      cursor: pointer;
      margin: 0 5px 10px;
      /*background: url(./img/carIcon.png) no-repeat left 14px center;*/
      /*background-size: 40px auto;*/
      border: 1px solid #dddddd85;
      border-radius: 4px;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      width: 46%;
      display: inline-block;
    }

    .list li a {
      color: #333333;
      font-size: 16px;
      display: block;
      text-align: center;
    }

    .list li.active a {
      color: #449DE1;
    }

    .list li p {
      color: #999;
      font-size: 12px;
      margin-top:4px;
    }

    .title {
      font-size: 14px;
      font-weight: bold;
      color: #cc5522;
    }

    .content {
      font-size: 13px;
      color: #333;
      margin-top: 6px;
    }

    .fl {
      float: left;
    }

    .carNum {
      color: #333;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
    }

    .carNum input {
      padding: 6px 30px 6px 10px;
      border-radius: 4px;
      border: 1px solid #dddddd;
      width: 170px;
    }

    .carNum> div{
      position: relative;
    }
    .search {
      position: absolute;
      top: 0;
      right: 2px;
      width: 28px;
      height: 28px;
      background: url("./img/searchIcon.png") no-repeat center;
      background-size: 100%;
      cursor: pointer;
      z-index: 10;
    }

    .carNum span {
      color: #409EFF;
    }
  </style>
</head>

<body>
<div class="box">
  <div id="container3" class="container fl"></div>
  <div class="fl list">
    <h3>园区车辆列表</h3>
    <div class="carNum">
      <div>
        <input type="text" id="searchInput"/>
        <span class="search"></span>
      </div>
      <p>现有车辆：<span id="carNum">0</span>辆</p>
    </div>
    <ul class="" id="aaaa">

    </ul>
  </div>
</div>
<div id="showdiv" style="height: 80%;width: 70%;position: absolute;top: 0px;background: white;top: 10%;z-index: 99999;left: 15%;overflow: auto;border-radius: 8px;display: none;">
  <span id="formtitle" style="font-size: 20px;display: flex;margin: 10px;justify-content: center;"></span>
  <!--  reportType-->
  <div id="reportType">
    <div id='worker' style="display: none;margin-bottom: 60px;">
      <div>
        <span>审核状态</span>
          <input class="formstate" placeholder="无" readonly/>
      </div>
      <div class="barrier">
        <div>
          <span>登记单位</span>
            <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div>
          <span>通行时间</span>
          <div style="display: flex;width: 70%;">
            <input class="formcomeTime" placeholder="无" readonly/>
            <input class="formoutTime" placeholder="无" readonly/>
          </div>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
        <div><span>部门及职务</span>
          <input class="formdepartment" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>联系电话</span>
          <input class="formphone" placeholder="无" readonly/>
        </div>
        <div><span>车辆型号</span>
          <input class="formcarType" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>行驶证</span>
          <input class="formdrivingLicenseCard" placeholder="无" readonly/>
        </div>
        <div><span>通行期限</span>
          <input class="formpassLoadTime" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id='goods' style="display: none;margin-bottom: 60px;">
      <div class="barrier">
        <div><span>登记单位</span>
          <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div><span>通行时间" prop="passLoadTime">
          <div style="display: flex;width: 70%;">
            <input class="formcomeTime" placeholder="无" readonly/>
            <input class="formoutTime" placeholder="无" readonly/>
          </div>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
        <div><span>联系电话" prop="phone">
          <input class="formphone" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>挂车号</span>
          <input class="formtrailerCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
        <div><span>行驶证</span>
          <input class="formdrivingLicenseCard" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>运输货物</span>
          <input class="formfreight" placeholder="无" readonly/>
        </div>
        <div><span>车辆最大载重</span>
          <input class="formmaxLoad" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车辆所属公司</span>
          <input class="formcarCompany" placeholder="无" readonly/>
        </div>
        <div><span>出发地</span>
          <input class="formoriginPlace" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>发货单位</span>
          <input class="formforwardingUnit" placeholder="无" readonly/>
        </div>
        <div><span>收货单位</span>
          <input class="formreceivingUnit" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id='temporary' style="display: none;margin-bottom: 60px;">
      <div class="barrier">
        <div><span>登记单位</span>
          <input class="formcompany" placeholder="无" readonly/>
        </div>
        <div><span>驾驶员</span>
          <input class="formdriveName" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车牌号</span>
          <input class="formcarNumber" placeholder="无" readonly/>
        </div>
        <div><span>挂车号</span>
          <input class="formtrailerCardId" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>驾驶证号</span>
          <input class="formdriveCardId" placeholder="无" readonly/>
        </div>
        <div><span>车辆所属公司</span>
          <input class="formcarCompany" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>车辆型号</span>
          <input class="formcarType" placeholder="无" readonly/>
        </div>
        <!--        trafficRoute-->
        <div><span>出发地与通行路线</span>
          <input class="formoriginPlace" placeholder="无" readonly/>
        </div>
      </div>
      <div class="barrier">
        <div><span>事由</span>
          <input class="formmainContent" type="textarea" placeholder="无" readonly/>
        </div>
        <div><span>同行人员</span>
          <input class="formpeerPersonnel" placeholder="无" readonly/>
        </div>
      </div>
    </div>
    <div id="danger" style="display: none;margin-bottom: 60px;">

      <div>
        <span>登记单位</span>
        <input class="formcompany" placeholder="无" readonly/>
      </div>


      <div>
        <span>进场日期</span>
        <input class="formcomeTime" placeholder="无" readonly/>
      </div>


      <div><span>离场日期</span>
        <input class="formoutTime" placeholder="无" readonly/>
      </div>


      <div><span>通行时间</span>
        <div style="display: flex;width: 70%;">
          <input class="formcomeTime" placeholder="无" readonly/>
          <input class="formoutTime" placeholder="无" readonly/>
        </div>
      </div>

      <div><span>驾驶员</span>
        <input class="formdriveName" placeholder="无" readonly/>
      </div>


      <div><span>驾驶证号</span>
        <input class="formdriveCardId" placeholder="无" readonly/>
      </div>


      <div><span>押运员</span>
        <input class="formescortName" placeholder="无" readonly/>
      </div>


      <div><span>押运员证号</span>
        <input class="formescortCardId" placeholder="无" readonly/>
      </div>


      <div><span>车牌号</span>
        <input class="formcarNumber" placeholder="无" readonly/>
      </div>


      <div><span>行驶证</span>
        <input class="formdrivingLicenseCard" placeholder="无" readonly/>
      </div>


      <div><span>挂车号</span>
        <input class="formtrailerCardId" placeholder="无" readonly/>
      </div>


      <div><span>危险货物运输证</span>
        <input class="formdangerCardId" placeholder="无" readonly/>
      </div>


      <div><span>车辆最大载重</span>
        <input class="formmaxLoad" placeholder="无" readonly/>
      </div>


      <div><span>车辆所属公司</span>
        <input class="formcarCompany" placeholder="无" readonly/>
      </div>


      <div><span>发货单位</span>
        <input class="formforwardingUnit" placeholder="无" readonly/>
      </div>


      <div><span>收货单位</span>
        <input class="formreceivingUnit" placeholder="无" readonly/>
      </div>


      <div><span>出发地</span>
        <input class="formoriginPlace" placeholder="无" readonly/>
      </div>


      <div><span>运输货物</span>
        <input class="formfreight" placeholder="无" readonly/>
      </div>


      <div><span>通行路线</span>
        <input class="formtrafficRoute" placeholder="无" readonly/>
      </div>


      <div><span>审核时间</span>
        <input class="formexamineTime" placeholder="无" readonly/>
      </div>


      <div><span>审核意见</span>
        <input class="formexamineOpinion" placeholder="无" readonly/>
      </div>


      <div><span>备注</span>
        <input class="formremarks" placeholder="无" readonly/>
      </div>


      <div><span>申请人</span>
        <input class="formloginId" placeholder="无" readonly/>
      </div>


      <div><span>联系电话</span>
        <input class="formphone" placeholder="无" readonly/>
      </div>


      <div><span>申请方式</span>
        <input class="formhpage" value="H5" readonly/>
      </div>


      <div><span>最后入场时间</span>
        <input class="formkeepTime" placeholder="无" readonly/>
      </div>


      <div><span>所属单位</span>
        <input class="formunitName" placeholder="无" readonly/>
      </div>


      <div><span>部门及职务</span>
        <input class="formdepartment" placeholder="无" readonly/>
      </div>


      <div><span>事由</span>
        <input class="formmainContent" type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="无"
               readonly/>
      </div>


      <div><span>同行人员</span>
        <input class="formpeerPersonnel" placeholder="无" readonly/>
      </div>

      <div><span>政策</span>
        <input class="formpolicy" type="textarea" :autosize="{ minRows: 5, maxRows: 8}" placeholder="无"
               readonly/>
      </div>
      <div><span>停用原因</span>
        <input class="formreasonDeactivation" type="textarea" placeholder="无" readonly/>
      </div>
      <div style="height: 40px;"></div>
    </div>
  </div>
  <div class="dialog-footer" onclick="cancel()">
    <a>关闭</a>
  </div>
</div>
<script type="text/javascript">
    // {
    //     id: 1,
    //         lng: 116.276039,
    //     lat: 40.207783,
    //     title: "厦门中山公园",
    //     content: ["地址：北京市新建宫门路19号", "电话：010-62881144"]
    // }, {
    //     id: 2,
    //         lng: 118.095231,
    //         lat: 24.461615,
    //         title: "厦门实验小学",
    //         content: ["地址：北京市后花园风景区", "电话：010-69768087"]
    // }, {
    //     id: 3,
    //         lng: 118.092644,
    //         lat: 24.468522,
    //         title: "厦门光明大厦",
    //         content: ["地址：北京市东城区景山前街4号", "电话：010-65131892"]
    // }, {
    //     id: 4,
    //         lng: 118.106586,
    //         lat: 24.467207,
    //         title: "厦门将军祠",
    //         content: ["地址：北京市东城区天坛东里甲1号", "电话：010-67013036"]
    // }, {
    //     id: 5,
    //         lng: 118.108526,
    //         lat: 24.474245,
    //         title: "厦门古龙商城",
    //         content: ["地址：北京市西城区文津街1号(故宫北)", "电话：010-64040610"]
    // }
    var points = [];

    var resultData;
    $(function () {
        $.ajax({
            url: "/dev-api/app/getAllGps",
            success: function (result) {
                resultData = result.data;
                usageData()
                // console.error(result.data);
                $('#carNum').text(result.data.length);
                result.data.forEach(function (val,index) {
                    var a = {
                        id: points.length + 1,
                        lng: val.longitude,
                        lat: val.latitude,
                        title: val.carNumber,
                        content: ["车牌：" + val.carNumber + "", "姓名：" + val.driveName + "", "" +index + ""]
                    }
                    // $("#aaaa").append("<li><a href=\"javascript:void(0)\">车牌"+val.carNumber+"</a></li>");
                    $("#aaaa").append('<li><a href="javascript:void(0)">' + val.carNumber + '</a><p>入园时间' + val.comeTime + '</p></li>');
                    points.push(a);
                    console.log(points);
                })
                cl();
            }
        });
    })
    var map = new BMapGL.Map('container3'); // 创建Map实例
    //map.centerAndZoom(new BMapGL.Point(124.880043, 45.076611), 16); // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMapGL.Point(123.44047, 43.53700), 16); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    // var map = new BaiduMap({
    //     id: "container3",
    //     level: 16, //  选填--地图级别--(默认15)
    //     zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
    //     type: ["地图", "卫星"], // 选填--显示地图类型--(默认不显示)
    //     width: 320, // 选填--信息窗口width--(默认自动调整)
    //     height: 70, // 选填--信息窗口height--(默认自动调整)
    //     titleClass: "title",
    //     contentClass: "content",
    //     showPanorama: false, // 是否显示全景控件(默认false)
    //     showMarkPanorama: true, // 是否显示标注点全景图(默认false)
    //     showLabel: false, // 是否显示文本标注(默认false)
    //     mapStyle: "normal", // 默认normal,可选dark,light
    //     icon: { // 选填--自定义icon图标
    //         url: "img/marker2.png",
    //         width: 34,
    //         height: 94
    //     },
    //     centerPoint: { // 中心点经纬度
    //         lng: 124.823608,
    //         lat: 45.118243
    //     },
    //     index: 3, // 开启对应的信息窗口，默认-1不开启
    //     animate: true, // 是否开启坠落动画，默认false
    //     points: points, // 标注点--id(唯一标识)
    //     callback: function (id) {
    //         $(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
    //     }
    // });

    // var data = map.getPosition();


    function cl() {
        $("body").on('click','.list li',function () {
            map.clearOverlays();
            // console.log(points[$(this).data("id")-1].lng, points[$(this).data("id")-1].lat)
            // map.openInfoWindow($(this).data("id"));
            var car = points[$(this).index()];
            console.log(car);
            var point = new BMapGL.Point(car.lng, car.lat);
            map.centerAndZoom(point, 15);
            // 创建小车图标
            // var myIcon = new BMapGL.Icon("/img/3Dcar.png", new BMapGL.Size(52, 26));
            var marker = new BMapGL.Marker(point); // 创建标注
            map.addOverlay(marker); // 将标注添加到地图中
            var content = `<b>${car.content[0]}</b><p>${car.content[1]}</p><a href="javascript:usageData(${car.content[2]})" style="color: #409EFF;">预约记录</a>`;
            var opts = {
                width: 150, // 信息窗口宽度
                height: 100, // 信息窗口高度
            }
            var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
            marker.addEventListener("click", function () {
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
            $(this).addClass("active").siblings().removeClass("active");
        })
    }

    // function cl(id) {
    //     map.openInfoWindow(id);
    // }
</script>
<script>
  function cancel() {
      $("#showdiv").hide();
  }
    function usageData(index) {

        var resultDataOne = resultData[index];
        console.log(resultDataOne);
        for(const key in resultDataOne) {
            $(".form"+key).val(resultDataOne[key]);
            if(key == 'reportType'){
                if(resultDataOne[key] == 'danger'){
                    $("#formtitle").html("危化品车辆申请");
                    $("#"+resultDataOne[key]).show();
                }else if(resultDataOne[key] == 'worker'){
                    $("#formtitle").html("工作人员车辆申请");
                    $("#"+resultDataOne[key]).show();
                }else if(resultDataOne[key] == 'goods'){
                    $("#formtitle").html("货物运输车辆申请");
                    $("#"+resultDataOne[key]).show();
                }else if(resultDataOne[key] == 'temporary'){
                    $("#formtitle").html("临时车辆申请");
                    $("#"+resultDataOne[key]).show();
                }else {
                    $("#formtitle").html("其他预约");
                    $("#danger").show();
                }
            }else if(key == 'hpage'){
                if(resultDataOne[key] == 0){
                    $("#formhpage").val("APP")
                }else {
                    $("#formhpage").val("H5")
                }
            }
            $("#showdiv").show();
        }
    }


    $(".search").click(function () {
        var searchInput = $("#searchInput").val();
        $("#aaaa").html("");
        points = [];
        resultData.forEach(function (val,index) {
            console.log(val);
            if(val.carNumber.indexOf(searchInput)!=-1){
                var a = {
                    id: points.length + 1,
                    lng: val.longitude,
                    lat: val.latitude,
                    title: val.carNumber,
                    content: ["车牌：" + val.carNumber + "", "用户名：" + val.driveName + "", "" +index + ""]
                }
                // $("#aaaa").append("<li><a href=\"javascript:void(0)\">车牌"+val.carNumber+"</a></li>");
                $("#aaaa").append('<li><a href="javascript:void(0)">' + val.carNumber + '</a><p>入园时间' + val.comeTime + '</p></li>');
                points.push(a);
                console.log(points);
            }
        })
    })

</script>
<style>
  #reportType{

  }

  #reportType input{
    width: 70%;
    -webkit-appearance: none;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  #reportType span{
    min-width: 150px;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  #reportType>div>div{
    margin: 20px;
  }

  .dialog-footer {
    position: fixed;
    bottom: 10%;
    display: flex;
    background-color: #1890ff;
    border-color: #1890ff;
    justify-content: center;
    align-items: center;
    width: 70%;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 400;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px;
    border-radius: 8px;
    color: white;
  }

  .barrier div{
    margin: 20px 0px;
  }
</style>
</body>

